.root {
  height: 34px;
  padding-left: var(--mantine-spacing-sm);
  padding-right: 4px;
  border-radius: var(--mantine-radius-md);
  color: var(--mantine-color-placeholder);
  border: 1px solid;

  @mixin light {
    border-color: var(--mantine-color-gray-3);
    background-color: var(--mantine-color-white);
  }

  @mixin dark {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
  }

  @mixin rtl {
    padding-left: 4px;
    padding-right: var(--mantine-spacing-sm);
  }
}

.shortcut {
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--mantine-radius-sm);
  border: 1px solid;
  font-weight: bold;

  @mixin light {
    color: var(--mantine-color-gray-7);
    border-color: var(--mantine-color-gray-2);
    background-color: var(--mantine-color-gray-0);
  }

  @mixin dark {
    color: var(--mantine-color-dark-0);
    border-color: var(--mantine-color-dark-7);
    background-color: var(--mantine-color-dark-7);
  }
}
